import React, { useState } from 'react';

const ImageWithFallback = ({ src, alt, fallbackSrc, }) => {
    const [imgSrc, setImgSrc] = useState(src);
    const [hasError, setHasError] = useState(false);

    // 图片加载失败时的处理函数
    const handleImageError = () => {
        if (!hasError) {
            setHasError(true);
            setImgSrc(fallbackSrc); // 使用备用图片
        }
    };

    return (
        <img
            src={imgSrc}
            alt={alt}
            onError={handleImageError}
            style={{width:'100%',height:'100px'}}
        />
    );
};

export default ImageWithFallback;